$itemPadding: 0 0 0 11px
$selectedColor: #FB4D53
$buttonBorder: 1px solid gray
$buttonBorderSelect: 1px solid #FB4D53
$itemspace: 0 0 0 11px
$itemlineheight: 10px

page
  background-color: #f7f7f7
  font-size: 15px
  line-height: 24px
  .main_container
    .order_state
      width: 100%
      .display_repair
        .unpaid_alert
          padding: $itemspace
          background: linear-gradient(90deg,#d94b44,#ed7b61)
          height: 56px
          width: 97%
          display: flex
          .icon
            flex: 1
            color: white
            font-size: 18px
            line-height: 53px
          .order_cost
            flex: 6
            color: white
            margin-top: 11px
            .unpaid
              font-size: 14px
              line-height: 13px
            .cost
              font-size: 11px
          .rest_time
            line-height: 33px
            text-align: right
            margin-right: 13px
            font-size: 11px
            color: white
            flex: 6
        .user_info
          padding: $itemspace
          background: white
          height: 58px
          width: 97%
          display: flex
          .icon
            color: #F44B51
            font-size: 20px
            flex: 1
            margin-top: 14px
            margin-left: -2px
          .user_detail
            flex: 7
            margin-top: 9px
            .tel
              font-size: 12px
              line-height: 16px
            .address
              font-size: 11px
              color:#999999
            .modify
              font-size: 11px
              text-align: right
          .white_space
            flex: 4
            text-align: right
            margin-right: 13px
            font-size: 11px
            color: #999999
            line-height: 57px
    .order_content
      background: white
      width: 100%
      height: 180px
      margin-top: 10px
      .display_repair
        padding: $itemspace 
        .shop_title
          width: 100%
          height: 45px
          display: flex
          line-height: 45px
          border-bottom: solid 1px rgba(187, 187, 187, 0.16)
          .icon
            flex: 1
            color: dimgray
            font-size: 18px 
            font-family: "iconfont" !important
          .shop_name
            flex: 10
            font-size: 14px
            webkit-text-stroke-width: 0
            font-family: "iconfont" !important
          .count_total
            flex: 4
            text-align: right
            margin-right: 13px
            font-size: 11px
            color: #999999
      .shop_inner
        width: 100%
        height: 65px
        display: flex
        padding: 10px 0 10px 0
        .goods_img
          width: 62px
          height: 62px
          background: lightgray
          text-align: center
          line-height: 62px 
        .goods_detail
          display: flex
          flex-direction: column
          height: 69px
          margin-left: 6px
          width: 76%
          .item_name
            flex: 1
            font-size: 12px
            overflow: hidden
            text-overflow: ellipsis
            line-height: 15px
          .item_type
            flex: 1
            font-size: 11px
            color: #999999
            line-height: 15px
          .item
            flex: 1
            line-height: 15px
            .price
              font-size: 14px
              font-weight: bold
              color: $selectedColor
            .count
              margin-top: -14px
              color: #999999
              float: right
              font-size: 11px
              margin-right: -7px
      .connect_service
        font-family: "iconfont" !important
        color: #999999
        border-top: solid 1px rgba(187, 187, 187, 0.16)
        text-align: center
        text-indent: -15px
        width: 100%
        line-height: 46px
        font-size: 11px
    .order_info
      margin-top: 10px
      height: 309px
      width: 100%
      background: white
      .order_detail
        padding: 0 0 0 13px
        .single_container
          display: flex
          font-size: 12px
          padding: 5px 0 0 0
          .type
            flex: 1
            color: #999999
          .content
            flex: 5
        .invoice
          display: flex
          border-bottom: solid 1px rgba(187, 187, 187, 0.16)
          border-top: solid 1px rgba(187, 187, 187, 0.16)
          padding: 5px 0 5px 0
          font-size: 12px
          margin-top: 9px
          .type
            flex: 1
            color: #999999
          .content
            flex: 5
      .settlement_amount
        padding: 0 13px 0 13px
        .settlement_container
          display: flex
          padding: 4px 0 0 0
          font-size: 12px
          .type
            flex: 1 
          .cost
            flex: 5
            text-align: right
            font-weight: bold
            font-family: "iconfont" !important
        .total
          font-size: 13px
          font-weight: bold
          .type
            float: right
          .cost
            float: right
            color: $selectedColor
      .bottom_area
        float: right
        padding: 0 4px 13px 4px
        border-top: solid 1px rgba(187, 187, 187, 0.16)
        width: 100%
        .btm_pay
          border-radius: 5px
          width: 70px
          height: 24px
          text-align: center
          line-height: 24px
          background-color: #F44B51
          border: solid 1px $selectedColor
          color: white
          font-size: 12px
          float: right
          margin-top: 5px
          margin-right: 9px
        .re_order
          border-radius: 5px
          width: 70px
          height: 24px
          text-align: center
          line-height: 24px
          border: solid 1px $selectedColor
          color: $selectedColor
          font-size: 12px
          float: right
          margin-top: 5px
          margin-right: 9px
        .change_address
          border-radius: 5px
          width: 70px
          height: 24px
          text-align: center
          line-height: 24px
          border: solid 1px #BBBBBB
          color: #BBBBBB
          font-size: 12px
          float: right
          margin-top: 5px
          margin-right: 9px
          color: #101010
        .cancel_order
          border-radius: 5px
          width: 70px
          height: 24px
          text-align: center
          line-height: 24px
          border: solid 1px #BBBBBB
          color: #BBBBBB
          font-size: 12px
          float: right
          margin-top: 5px
          margin-right: 9px
          color: #101010